<template>
    <div class="register">
      <div class="one">
        <div class="left">
          <div style="margin-top:53px;width:289px;height:404px;">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" style="width: 289px;height: 404px;" alt="图像" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div style="text-align: center;color: #909399;">点击上传照片</div>
          </div>
        </div>
        <div class="right">
          <div style="width:420px;height:50px;padding:11px 0">
            <el-input placeholder="请输入用户名" v-model="value" clearable></el-input>
          </div>
          <div style="width:420px;height:50px;padding: 11px 0">
            <el-radio v-model="radio" style="margin-left: 90px;" label="1" border>男神</el-radio>
            <el-radio v-model="radio" style="margin-left: 32px;" label="2" border>女神</el-radio>
          </div>
          <div style="width:420px;height:50px;padding:11px 0">
            <el-date-picker v-model="date" type="date" placeholder="出生日期"></el-date-picker>
          </div>
          <div style="width:420px;height:50px;padding:11px 0">
            <el-input placeholder="请输入手机号" v-model="value" clearable></el-input>
          </div>
          <div style="display:flex;width:420px;height:50px;padding: 11px 0">
            <div style="width:300px;">
              <el-input placeholder="请输入验证码" v-model="value" clearable></el-input>
            </div>
            <div style="flex: 1;margin-left: 23px;">
              <el-button type="primary" style="width:93px;height:40px;padding-left:10px" round>获取验证码</el-button>
            </div>
          </div>
          <div style="width:420px;height:50px;padding:11px 0">
            <el-input placeholder="请输入密码" v-model="value" show-password></el-input>
          </div>
          <div style="width:420px;height:50px;padding:11px 0">
            <el-input placeholder="请确认密码" v-model="value" show-password></el-input>
          </div>
        </div>
      </div>
      <div class="two">
        <div class="hobby">
          <span style="color: #909399;font-size: 32px">喜好</span>
          <div style="padding: 25px 50px;height:200px;border: 1px solid #DCDFE6">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              style="width: 90px;margin-left: 10px;vertical-align: bottom;"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            ></el-input>
            <el-button v-else style="margin-left: 10px;height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;"
                       size="small" @click="showInput">+ New Tag</el-button>
          </div>
        </div>
        <div class="motto">
          <span style="color: #909399;font-size: 32px">座右铭</span>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="motto"></el-input>
        </div>
      </div>
      <div class="three">
        <div style="display: flex;width: 750px; height:100px;line-height: 100px">
          <div style="width: 375px;text-align: center">
            <el-button type="info" style="width:112px;height:52px" @click="handleClick2Cancel" round>取消</el-button>
          </div>
          <div style="flex: 1;text-align: center;">
            <el-button type="success" style="width:112px;height:52px" @click="handleClick2confirm" round>注册</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Register',
  data: function () {
    return {
      value: '',
      motto: '明月松间照，清泉石上流。',
      imageUrl: '',
      date: '',
      radio: '1',
      dynamicTags: ['电影', '歌曲', '动漫'],
      inputVisible: false,
      inputValue: ''
    }
  },
  activated: function () {
    this.$store.dispatch('changeTabbarState', false)
  },
  methods: {
    handleAvatarSuccess: function (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload: function (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleClose: function (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput: function () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm: function () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleClick2Cancel: function () {
      this.$router.push('/')
    },
    handleClick2confirm: function () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .register >>> .el-upload
    border: 3px dashed #d9d9d9;
    border-radius: 6px
    cursor: pointer
    position: relative
    overflow: hidden
  .register >>> .el-upload:hover
    border-color: #409EFF
  .register >>> .avatar-uploader-icon
      font-size: 28px
      color: #8c939d
      width: 283px
      height: 396px
      line-height: 396px
      text-align: center
  .register >>> .avatar
    width: 178px
    height: 178px
    display: block
  .register >>> .el-input__inner
    background: transparent
    color: orange
  .register >>> .el-textarea__inner
    background: transparent
    min-height: 100px !important
    color: orange
  .register >>> .el-date-editor
    width: 336px
  .register
    width: 750px
    height: 1334px
    position: absolute
    background-image: url("../../src/assets/imgs/bg_register.png")
    background-color transparent
    background-repeat:no-repeat
    background-size:750px 1334px
    background-attachment: fixed
    .one
      margin-top: 6px
      display: flex
      width: 750px
      height: 510px
      box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.2)
      .left
        height:510px
        width: 289px
      .right
        flex:1
        padding: 0 20px
    .two
      margin-top: 18px
      width: 750px
      height: 520px
      .hobby
        width: 750px
        height: 300px
      .motto
        margin-top: 20px
        width: 750px
        height: 200px
    .three
      padding-top: 70px
      width: 750px
      height: 200px
</style>
